﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Soapi.JS Paged Results Demo</title>
    <link href="http://sstatic.net/so/all.css" rel="stylesheet" />
    <style type="text/css">
        #output {
            border: solid 1px black;
            background-color: #F4F3F3;
            font-family: Monospace;
            font-size: 12px;
            white-space: pre;
        }
        #footer {
            background-color: #EEEEEE;
            color: Black;
        }
        .footerdiv {
            margin: 6px;
        }
        .copyright {
            margin-top: 10px;
            color: #3366CC;
        }
    </style>

    <script src="scripts/Soapi.js" type="text/javascript"></script>

    <script type="text/javascript">

        var userBrowser = {};

        (function()
        {

            var apiKey = 'qgAq_KfDu0KYzlNG-qaTuw';

            userBrowser.initialize = function()
            {

                // render placeholder
                renderUser();

                // get a reference to our UI elements
                var siteSelect = $g("sites");
                var userIdInput = $g("user-id");

                $w("fetching sites from stackauth");


                // Get all of the stack exchange sites from StackAuth.

                // Sites (/sites) and UsersByIdAssociated (/users/{id}/associated), are
                // available on every RouteFactory instance, regardless of target, including
                // no target, which is a good thing because we need to get the list of endpoints
                // from which to specify a target.

                new Soapi.RouteFactory("", apiKey)
                .Sites()
                .getResponse(

                    function success(response)
                    {

                        for (var i = 0; i < response.items.length; i++)
                        {

                            var site = response.items[i];

                            // add the name and id to the drop down
                            siteSelect.add(new Option(site.name, site.api_endpoint));

                            $w("&nbsp;&nbsp;" + site.id + " = " + site.api_endpoint);
                        }


                        // hook the button to fetch a user
                        $g("fetchUserButton").onclick = function()
                        {

                            var userId = userIdInput.value;
                            var endpoint = siteSelect.options[siteSelect.selectedIndex].value;

                            $w("fetching " + userId + " from " + endpoint);

                            new Soapi.RouteFactory(endpoint, apiKey)
                            .UsersById(userId)
                            .getResponse(
                                function success(userResponse)
                                {
                                    if (userResponse.items.length == 0)
                                    {
                                        $w("no user found");
                                        renderUser();
                                    }
                                    else
                                    {
                                        $w("user " + userResponse.items[0].display_name + " found");
                                        renderUser(userResponse.items[0]);
                                    }
                                },
                            function failure(error)
                            {
                                // just means that no user was found. log it and get on with life
                                $w("ignored error: " + error.message);
                            });
                        };
                    },
            function fail(error)
            {
                // could not get sites. nothing else to do.
                $w("FATAL: " + error.message);
            });
            };


            // various utility functions

            function renderUser(user)
            {
                if (user)
                {
                    $g("user-about-me").innerHTML = user.about_me;
                    $g("user-age").innerHTML = user.age || "";
                    $g("user-location").innerHTML = user.location || "";
                    $g("website-url").innerHTML = (user.website_url || "").replace("http://", "");
                    $g("website-url").href = user.website_url || "";



                    $g("user-last-activity").title = user.last_access_date;
                    $g("user-last-activity").innerHTML = timeSince(user.last_access_date) + " ago";


                    $g("user-created").title = user.creation_date;
                    $g("user-created").innerHTML = timeSince(user.creation_date);

                    $g("user-displayname2").innerHTML = "<b>" + user.display_name + "</b>";
                    $g("user-displayname").innerHTML = user.display_name;

                    var userType = user.user_type;
                    $g("user-type").innerHTML = userType.substring(0, 1).toUpperCase() + userType.substring(1)
                                            + (userType == "moderator" ? "" : " User");

                    $g("user-view-count").innerHTML = user.view_count + " views";
                    $g("user-reputation").innerHTML = user.reputation;
                    $g("user-email-hash").src = "http://www.gravatar.com/avatar/"
                                            + user.email_hash + "?s=128&amp;d=identicon&amp;r=PG";
                }
                else
                {
                    $g("user-about-me").innerHTML =
                    $g("user-age").innerHTML =
                    $g("user-location").innerHTML =
                    $g("website-url").innerHTML =
                    $g("website-url").href =
                    $g("user-last-activity").title =
                    $g("user-last-activity").innerHTML =
                    $g("user-created").title =
                    $g("user-created").innerHTML =
                    $g("user-displayname2").innerHTML =
                    $g("user-displayname").innerHTML =
                    $g("user-type").innerHTML =
                    $g("user-view-count").innerHTML =
                    $g("user-reputation").innerHTML = "badger";
                    $g("user-email-hash").src = "http://www.adiumxtras.com/images/pictures/badger_badger_mushroom_snake_dock_icons_328313_img_316.png";
                }


            }


            function timeSince(date)
            {

                var seconds = Math.floor((new Date() - date) / 1000);

                var interval = Math.floor(seconds / 31536000);

                if (interval > 1)
                {
                    return interval + " years";
                }
                interval = Math.floor(seconds / 2592000);
                if (interval > 1)
                {
                    return interval + " months";
                }
                interval = Math.floor(seconds / 86400);
                if (interval > 1)
                {
                    return interval + " days";
                }
                interval = Math.floor(seconds / 3600);
                if (interval > 1)
                {
                    return interval + " hours";
                }
                interval = Math.floor(seconds / 60);
                if (interval > 1)
                {
                    return interval + " minutes";
                }
                return Math.floor(seconds) + " seconds";
            }

            function $w(value)
            {
                var el = document.createElement("div");
                el.innerHTML = value;
                $g("output").appendChild(el);
            }

            function $g(id)
            {
                return document.getElementById(id);
            }

        })();

        
    </script>

</head>
<body class="users-page" style="margin-top: 2.5em;" onload="userBrowser.initialize()">
    <div class="container">
        <h1>
            SOAPI.JS User Browser</h1>
        <p>
            This simple script demonstrates how to retrieve the site list from stackauth.com
            to get the api endpoints and then retrieve a user by id from the target site.</p>
        <p>
            Methods used:</p>
        <ul>
            <li><code>RouteFactory.Sites</code></li>
            <li><code>RouteFactory.UsersById</code></li>
        </ul>
        Site:
        <select id="sites">
        </select>
        UserId:
        <input type="text" id="user-id" />
        <input type="button" id="fetchUserButton" value="Fetch User" />
        <hr />
        <div class="container">
            <div id="content">
                <div id="mainbar-full">
                    <div class="subheader">
                        <h1 id="user-displayname">
                        </h1>
                    </div>
                    <table class="vcard">
                        <tbody>
                            <tr>
                                <td style="vertical-align: top; width: 170px;">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td id="user-avatar">
                                                    <img height="128" width="128" class="logo" alt="" src="" id="user-email-hash" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="summaryinfo">
                                                    <div class="summarycount" id="user-reputation">
                                                    </div>
                                                    <div style="margin-top: 5px; font-weight: bold;">
                                                        reputation</div>
                                                </td>
                                            </tr>
                                            <tr style="height: 30px;">
                                                <td style="vertical-align: bottom;" class="summaryinfo" id="user-view-count">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="vertical-align: top; width: 350px;">
                                    <div style="float: right; margin-top: 19px; margin-right: 4px;">
                                    </div>
                                    <h2 style="margin-top: 20px;" id="user-type">
                                    </h2>
                                    <table class="user-details">
                                        <tbody>
                                            <tr>
                                                <td style="width: 120px;">
                                                    name
                                                </td>
                                                <td class="fn nickname" style="width: 230px;" id="user-displayname2">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    member for
                                                </td>
                                                <td>
                                                    <span title="" class="cool" id="user-created"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    seen
                                                </td>
                                                <td>
                                                    <span class="supernova"><span class="relativetime" title="2010-06-29 22:41:35Z" id="user-last-activity">
                                                    </span></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    website
                                                </td>
                                                <td>
                                                    <div class="no-overflow">
                                                        <a class="url" rel="me" href="" id="website-url"></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    location
                                                </td>
                                                <td class="label adr" id="user-location">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    age
                                                </td>
                                                <td id="user-age">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width: 390px;">
                                    <div class="note" id="user-about-me">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <hr />
        <div id="output">
        </div>
        <div id="footer">
            <div class="footerdiv">
                This scooby snack of an app was built using only <a href="http://stackapps.com/questions/494"
                    target="_blank">SOAPI.JS</a>, an intuitive JavaScript wrapper library for the
                <a href="http://stackapps.com/questions/2/getting-started-with-the-api" target="_blank">
                    Stack Overflow API</a><br />
            </div>
            <div class="footerdiv">
                No jQuery scripts where harmed in the making of this scooby snack of an app.</div>
            <div class="footerdiv">
                The source code for this scooby snack of an app is right here in the page.
            </div>
            <div class="footerdiv">
                View the source to see how easy it is to query the API using <a href="http://stackapps.com/questions/494"
                    target="_blank">SOAPI.JS</a>
            </div>
            <div class="copyright">
                &copy; 2010 Sky Sanders - <a href="http://stackapps.com/questions/494" target="_blank">
                    SOAPI.JS</a> is licensed under GPL version 2 open source license.</div>
        </div>
    </div>
</body>
</html>
